<template>
    <yd-infinitescroll ref="view" :on-infinite="handleScroll" :distance="0" style="min-height: 20rem">
        <span slot="loadingTip"></span>
        <span slot="doneTip"></span>
        <div class="article-page" v-if="showArticle" slot="list">
            <div class="article-title">
                <h1>{{ detail.content.art_title }}</h1>
                <div class="article-info">
                    <span class="time">
                        <yd-icon name="compose" size=".2rem"></yd-icon>
                        {{ detail.content.art_date }}</span>
                    <span class="tag">
                        <yd-icon name="discount" size=".2rem"></yd-icon>
                        {{ detail.content.art_keywords }}</span>
                </div>
            </div>
            <component :is="content(detail)"></component>
            <div class="article-buttons" v-if="articleType=='article'">
                <p>
                    <yd-icon name="ucenter-outline" size=".5rem" color="#B8B2B4"></yd-icon>
                    <span> {{ detail.content.art_reads || 0 }} </span>
                    <yd-icon name="good" size=".5rem" :color="myRate ? '#D10004':'#B8B2B4'" @click.native="rateArticle()"></yd-icon>
                    <span> {{ detail.content.art_rates || 0 }} </span>
                </p>
            </div>
            <div class="activity-buttons" v-if="articleType=='activity'">
                <p>
                    <yd-icon name="ucenter-outline" size=".5rem" color="#B8B2B4"></yd-icon>
                    <span> {{ detail.content.art_reads || 0 }} </span>
                    <yd-icon name="good" size=".5rem" :color="myRate ? '#D10004':'#B8B2B4'" @click.native="rateArticle()"></yd-icon>
                    <span> {{ detail.content.art_rates || 0 }} </span>
                    <yd-icon name="like" size=".5rem" :color="myActivity ? '#D10004':'#B8B2B4'"></yd-icon>
                    <span> {{ detail.content.users_join ? detail.content.users_join.length : 0}} </span>
                    <div>
                        <yd-button size="large" v-if="!myActivity" type="primary" @click.native="joinActivity()">报名</yd-button>
                        <yd-button size="large" v-else type="danger" @click.native="cancelActivity()">取消报名</yd-button>
                    </div>
                    <div v-if="detail.content.users_join">
                    <!--transition-group name="list" tag="p">
                        <span v-for="item in detail.content.users_join" :key="item.user_id">
                            <img class="list-avatar" :src="item.user_image"/>
                            <span class="list-name">{{ item.user_name }}</span>
                        </span>
                    </transition-group-->
                        报名人数：{{ detail.content.users_join.length }}
                    </div>
                </p>
            </div>
            <div class="vote-range" v-if="articleType=='vote'">
            <animate-item enter="slideInUp">
                <div v-if="!voted && !myVote" key="vote">
                    <div v-for="vote in voteList" :key="vote.id">
                        <h2>请投票（{{ vote.type }} {{ vote.vote_nbr ? '可投' + vote_nbr + '票' : '' }}）</h2>
                        <div v-if="vote.type=='多选'">
                            <yd-cell-group>
                                <yd-cell-item type="checkbox" v-for="item in vote.options" :key="item.id">
                                    <span slot="left">{{ item.name }}</span>
                                    <input slot="right" type="checkbox" :value="item.id" v-model="voteResults"/>
                                </yd-cell-item>
                            </yd-cell-group>
                            <yd-button size="large" :type="voteResults.length?'primary':'disabled'" @click.native="voteArticle(vote)">投票</yd-button>
                        </div>
                        <div v-if="vote.type=='单选'">
                            <yd-cell-group>
                                <yd-cell-item type="radio" v-for="item in vote.options" :key="item.id">
                                    <span slot="left">{{ item.name }}</span>
                                    <input slot="right" type="radio" :value="item.id" v-model="voteResult"/>
                                </yd-cell-item>
                            </yd-cell-group>
                            <yd-button size="large" :type="voteResult?'primary':'disabled'" @click.native="voteArticle(vote)">投票</yd-button>
                        </div>
                    </div>
                </div>
                <!-- 不要看结果
                <div v-else key="result">
                    <div v-for="vote in voteList" :key="vote.id">
                        <h2>投票结果（{{ vote.type }}）</h2>
                        <ul class="op-text-ul">
                            <li class="op-text-li" v-for="item in vote.options" :key="item.id">
                                <div class="op-cont">
                                    <div class="l-con">{{ item.name }}</div>
                                    <div class="r-con">
                                        <span class="perc">{{ item.count }}（{{votePercent(vote,item) + '%'}}）</span>
                                    </div>
                                </div>
                                <div class="op-progress" :style="{width: votePercent(vote,item) + '%'}"></div>
                            </li>
                        </ul>
                    </div>
                </div>
                -->
            </animate-item>
            </div>
            <div class="survey-range" v-if="articleType=='survey'">
                <animate-item enter="slideInUp">
                <div :key="question.id">
                <h2>{{ question.content }}</h2>
                <div v-if="question.type=='单选'">
                    <yd-cell-group>
                        <yd-cell-item type="radio" v-for="item in question.options" :key="item.id">
                            <span slot="left">{{ item.name }}</span>
                            <input slot="right" type="radio" :value="item.id" v-model="questionResult"/>
                        </yd-cell-item>
                    </yd-cell-group>
                </div>
                <div v-if="question.type=='多选'">
                    <yd-cell-group>
                        <yd-cell-item type="checkbox" v-for="item in question.options" :key="item.id">
                            <span slot="left">{{ item.name }}</span>
                            <input slot="right" type="checkbox" :value="item.id" v-model="questionResults"/>
                        </yd-cell-item>
                    </yd-cell-group>
                </div>
                <div v-if="question.type=='判断'">
                    <yd-cell-group>
                        <yd-cell-item type="radio" v-for="item in question.options" :key="item.id">
                            <span slot="left">{{ item.name }}</span>
                            <input slot="right" type="radio" :value="item.id" v-model="questionResult"/>
                        </yd-cell-item>
                    </yd-cell-group>
                </div>
                <yd-button size="large" :type="questionResult || questionResults.length ? 'primary' : 'disabled'" @click.native="nextQuestion()">{{ hasNextQuest() ? '下个问题' : '完成'}}</yd-button>
                </div>
                </animate-item>
            </div>
            <div class="article-remarks" v-if="detail.content.art_remark">
                <ul>
                    <li class="list-item">
                        <div class="main">
                            <p class="seperator">
                                <span>评论区</span>
                            </p>
                        </div>
                    </li>
                    <li class="list-item" v-for="item in remarks.list">
                        <div class="main">
                            <img class="avatar" :src="item.user_image" />
                            <div class="text">
                                <span class="name">{{item.user_name}}<span class="tag">{{item.remark_date}}</span></span>
                                {{ item.remark }}
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </yd-infinitescroll>
</template>

<script>
module.exports = {
    created () {
        this.$store.dispatch('readArticle', {channel: this.channel, id: this.article, resolve: (data) => {
            this.articleType = data.art_type
            this.$store.commit('webar', {
                show: 'default',
                nav: {
                    title: this.detail.content.art_title,
                    back: {name: this.detail.content.art_channel}
                }
            })
        }})
    },
    data () {
        return {
            channel: this.$route.params.channel,
            article: this.$route.params.id,
            loadingRemarks: false,
            voteResult: undefined,
            voteResults: [],
            articleType: undefined,
            currentQuestion: 0,
            questionResult: undefined,
            questionResults: [],
            voted: false
        }
    },
    computed: {
        detail () {
            return this.$store.getters.articleContent
        },
        showArticle () {
            return this.detail.article == this.article
        },
        myRate () {
            if(this.detail.content.users_rate) {
                return _.filter(this.detail.content.users_rate, {user_id:this.$store.getters.userID}).length > 0
            }
            return this.detail.content.user_rated
        },
        remarks () {
            const remarks = this.$store.getters.articleRemarks
            return remarks.article == this.article ? remarks : {}
        },
        myActivity () {
            if(this.detail.content.users_join) {
                return _.filter(this.detail.content.users_join, {user_id: this.$store.getters.userID}).length > 0
            }
        },
        myVote () {
            if(this.detail.content.users_vote) {
                return _.filter(this.detail.content.users_vote, {user_id: this.$store.getters.userID}).length > 0
            }
            return this.detail.content.user_voted
        },
        voteList () {
            return this.detail.content.vote
        },
        questionList () {
            return this.detail.content.question
        },
        question () {
            return this.questionList[this.currentQuestion]
        }
    },
    methods: {
        content (info) {
            return {template: ["<div class='article'>", info.content.body, "</div>"].join('')}
        },
        rateArticle () {
            if(this.myRate) {
                $dialog.toast({
                    mes: '您已经赞过了！',
                    icon: 'error',
                    timeout: 1000
                })
            } else {
                this.$store.dispatch('rateArticle', {channel: this.channel, id: this.article, resolve: (data) => {

                }})
            }
        },
        handleScroll () {
            if(this.detail.content.art_remark && !this.detail.remarks && !this.loadingRemarks) {
                this.loadingRemarks = true
                this.$store.dispatch('getRemarks', {channel: this.channel, id: this.article, resolve: (data) => {
                    this.loadingRemarks = false
                    this.$refs.view.$emit('ydui.infinitescroll.loadedDone')
                    this.$store.commit('webar', {
                        show: 'remark',
                        nav: {
                            title: this.detail.content.art_title,
                            back: {name: this.detail.content.art_channel}
                        },
                        handleContent: this.handleContent
                    })
                }})
            } else {
                this.$refs.view.$emit('ydui.infinitescroll.loadedDone')
            }
        },
        handleContent (text) {
            this.$store.dispatch('remarkArticle', {channel: this.channel, id: this.article, resolve: (data) => {

            }})
        },
        joinActivity () {
            this.$store.dispatch('joinActivity', {id: this.article, resolve: (data) => {

            }})
        },
        cancelActivity () {
            this.$store.dispatch('cancelActivity', {id: this.article, resolve: (data) => {

            }})
        },
        voteArticle (vote) {
            const result = vote.type=='多选' ? this.voteResults : [this.voteResult]
            if(vote.vote_nbr && result.length > vote.vote_nbr) {
                $dialog.toast({
                    mes: '您可以投' + vote.vote_nbr + '票！',
                    icon: 'error',
                    timeout: 1000
                })
            } else {
                this.$store.dispatch('voteArticle', {id: this.article, vote: result, resolve: (data) => {
                    this.detail.content.vote = data.vote
                    this.detail.content.users_vote = data.users_vote
                    this.voted = true
                }})
            }
        },
        votePercent (vote, item) {
            return _.round(item.count * 100 / _.sumBy(vote.options, "count"), 1)
        },
        hasNextQuest() {
            return this.currentQuestion < this.questionList.length -1
        },
        nextQuestion() {
            if(this.question.type == '单选'  || this.question.type == '判断') {
                this.question.result = [this.questionResult]
                this.questionResult = undefined
            } else {
                this.question.result = this.questionResults
                this.questionResults = []
            }
            if(this.hasNextQuest()) {
                this.currentQuestion ++
            } else {
                const result = _.map(this.questionList, (q) => { return {id: q.id, result: q.result}})
                this.$store.dispatch('surveySubmit', {id: this.article, survey: result, resolve: (data) => {
                    this.$router.push({name: '问卷'})
                }})
            }
        },
        hasPrevQuest() {
            return this.currentQuestion >0
        },
        prevQuestion() {
            if(this.hasPrevQuest())
                this.currentQuestion --
        }
    }
}
</script>

<style scoped>
.article-page {
    background-color: #fff;
}
.article-title {
    position: relative;
    padding: .3rem;
}
.article-title h1 {
    font-size: 28px;
    font-weight: 700;
    line-height: 38px;
    color: #191919;
    margin: 0 auto;
}
.article-info {
    padding-top: .1rem;
}
.article-info .time {
    color: #A4A6A8;
    font-size: .2rem;
    float: right;
}
.article-info .tag {
    color: #A4A6A8;
    font-size: .2rem;
}
.article {
    color: #191919;
    font-size: .3rem;
    line-height: .5rem;
    padding-top: .1rem;
    overflow: hidden;
    margin: .2rem;
    margin-top: 0;
    min-height: calc(100%);
}
.article p {
    padding: 10px 0 20px;
    text-indent: .6rem
}
.article img {
    margin: 0 auto;
    max-width: calc(100% - .2rem);
}
.article-buttons {
    margin: 0 auto;
    padding: .2rem;
    padding-bottom: 1rem;
    text-align: center;
    font-size: .5rem;
}
.vote-range {
    margin: 0 auto;
    padding: .2rem;
    padding-bottom: 1rem;
    text-align: center;
    font-size: .5rem;
}
.vote-range h2 {
    font-size: .5rem;
    margin: .2rem;
    border-radius: .1rem;
    background-color: #eee;
}
.survey-range {
    margin: 0 auto;
    padding: .2rem;
    padding-bottom: 1rem;
    text-align: center;
    font-size: .5rem;
}
.survey-range h2 {
    font-size: .5rem;
    margin: .2rem;
    border-radius: .1rem;
    background-color: #eee;
}
.list-item {
    display: block;
    min-height: 1rem;
    padding: .2rem;
}
    .seperator {
        margin: .1rem 0;
        text-align: center;
    }
    .seperator > span {
            display: inline-block;
            padding: 0 .18rem;
            font-size: .12rem;
            color: #fff;
            border-radius: .1rem;
            background-color: #dcdcdc;
        }
    .avatar {
        float: left;
        margin: 0 .2rem 0 0;
        border-radius: .8rem;
        width: .8rem;
        height: .8rem;
    }
    .text {
        display: inline-block;
        position: relative;
        padding: 0 .1rem;
        margin-top: .4rem;
        max-width: calc(100% - 2rem);
        min-height: .3rem;
        line-height: 2.5;
        font-size: .25rem;
        text-align: left;
        word-break: break-word;
        background-color: #fff;
        border-radius: .1rem;
        box-shadow: 0px 0px 0px #888888;
    }
    .text:before {
            content: " ";
            position: absolute;
            top: .1rem;
            right: 100%;
            border: .1rem solid transparent;
            border-right-color: #fff;
        }
.text .name {
    position: absolute;
    line-height: .1rem;
    font-size: .3rem;
    color: #0A27D2;
    top: -.3rem;
    left: 0rem;
    min-width: 6rem;
}
.text .tag {
    display: inline-block;
    padding: 0 .18rem;
    font-size: .12rem;
    color: #fff;
    border-radius: .1rem;
    background-color: #dcdcdc;
    height: .25rem;
    line-height: .25rem;
    margin-left: .3rem;
}

.activity-buttons {
    margin: 0 auto;
    padding: .2rem;
    padding-bottom: 1rem;
    text-align: center;
    font-size: .5rem;
}
.activity-buttons .list-avatar {
    display: inline-block;
    border-radius: .4rem;
    width: .4rem;
    height: .4rem;
    margin-top: .2rem;
}
.activity-buttons .list-name {
    line-height: .2rem;
    font-size: .2rem;
    /* color: #0A27D2; */
    position: relative;
    left: -.6rem;
    top: .3rem;
}
.list-item {
    display: block;
    min-height: 1rem;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}

.op-text-ul {
    overflow: hidden;
    margin-bottom: .1rem;
    list-style: none;
}
.op-text-li {
    position: relative;
    height: .7rem;
    margin-bottom: .1rem;
    background-color: #f4f4f4;
    font-size: .28rem;
}
.op-text-li .op-cont .l-con {
    position: absolute;
    top: 11px;
    left: 11px;
    z-index: 2;
    overflow: hidden;
    height: 18px;
}
.op-text-li .op-cont .r-con {
    position: absolute;
    right: 10px;
    top: 0;
    z-index: 2;
    height: .7rem;
    width: 110px;
    text-align: right;
}
.op-text-li .op-cont .r-con .perc {
    line-height: .7rem;
}
.op-text-li .op-progress {
    background-color: #e5e5e8;
    height: .7rem;
    z-index: 1;
}

.no-mode-translate-wrapper {
  position: relative;
}
.no-mode-translate-fade-enter-active, .no-mode-translate-fade-leave-active {
  transition: all 1s;
}
.no-mode-translate-fade-enter, .no-mode-translate-fade-leave-active {
  opacity: 0;
}
.no-mode-translate-fade-enter {
  transform: translateX(3rem);
}
.no-mode-translate-fade-leave-active {
    position:absolute;
    left: 0;
  transform: translateX(-3rem);
}
</style>